<template>
    <div>


    <a-dropdown v-if="user != null">

        <div style="display: flex;align-items: center;padding-right: 18px">
            <a-avatar :size="30" icon="user" />
            <span style="font-weight: bolder;margin-left: 10px">{{user.userNickname}}</span>
        </div>
        <a-menu slot="overlay">
            <!--<a-menu-item >-->
                <!--修改头像-->
            <!--</a-menu-item>-->
            <a-menu-item @click="updatePwdShow=true;">
                修改密码
            </a-menu-item>
            <a-menu-item @click="logout">
                退出登录
            </a-menu-item>

        </a-menu>
    </a-dropdown>

        <a-modal v-model="updatePwdShow" title="修改密码" @ok="()=>{this.$refs.updatePwd.submit()}">
            <UpdatePwd @ok="updatePwdShow=false" ref="updatePwd"></UpdatePwd>
        </a-modal>


    </div>
</template>

<script>

    import {Modal,Dropdown,Menu,Avatar} from 'ant-design-vue';
    import UpdatePwd from './UpdatePasswordComponent'
    import persistentUtil from '@/common/persistentUtil.js'
    export default {
        name: "UseAvatar",

        components:{
            UpdatePwd,
            AModal:Modal,
            ADropdown:Dropdown,
            AMenuItem:Menu.Item,
            AAvatar:Avatar,
            AMenu:Menu
        },
        data(){
            return {
                updatePwdShow:false,
                user:{}
            }
        },
        mounted(){
            this.user = persistentUtil.getUser();
        },
        methods:{
            logout(){
                let that = this;
                Modal.confirm({
                    title: '确认退出登录吗?',
                    content: '将会清除您的登录状态、授权信息',
                    onOk() {
                        persistentUtil.clearAll();
                        persistentUtil.clearDicts()
                        that.$router.replace("/login");

                    }
                });
            }
        }
    }
</script>

<style scoped>

</style>